 <style lang="less" scoped>
.xpanel {
  padding: 15px;
  height: 100%;
  min-height: 170px;
  background: url('./components/imgs/panel.png') center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.realTime-title {
  border-left: 3px solid #4588b3;
  div {
    font-size: 18px;
    margin-left: 10px;
    color: #fff;
    padding: 5px;
    padding-left: 40px;
    background-color: #0c2461;
    border: 1px solid #0a3d62;
  }
}
.chart-container {
  padding: 15px;
  width: 100%;
  min-width: 800px;
  height: 970px;
  background: rgb(3, 12, 59) url('./components/imgs/background-screen.png')
    no-repeat 0 0;
  background-size: 100% 100%;
  .chart-header {
    width: 100%;
    height: 146px;
    opacity: 1;
    background: url('./components/imgs/screen-header.png') no-repeat 0 0;
    background-size: 100% 100%;
    .header-text {
      font-family: 'Microsoft Yahei', Arial, sans-serif;
      font-size: 36px;
      color: rgb(255, 255, 255);
      font-weight: bold;
      justify-content: center;
      text-align: center;
      padding-top: 12px;
    }
  }
}
</style>

<template>
  <div :style="{'height':chartHeight+'px'}"
       style="  position: relative;">
    <Icon type="md-aperture"
          color="#fff"
          size="32"
          @click="fullScreen"
          style="position:absolute;top:5px;" />
    <div class="chart-container">
      <div class="chart-header">
        <div class="header-text">智慧消防应用管理平台</div>
      </div>
      <div class="chart-content">
        <Row gutter="20">
          <Col :span="5"
               style="float:left;margin-top: -85px;">
          <div class="xpanel"
               style="height:590px;">
            <div class="realTime-title">
              <div>社区火灾告警情况</div>
            </div>
            <div>
              <shopAlarm :dataSource="allPlaceAlarmSum"></shopAlarm>
            </div>
          </div>
          </Col>
          <Col :span="14">
          <div class="xpanel">
            <div>
              <GDMap ref="GdMap"></GDMap>

            </div>
          </div>
          </Col>
          <Col :span="5"
               style="float:right;margin-top: -85px;">
          <div class="xpanel"
               style="height:590px;">
            <div>
              <todayAlarm :dataSource="todayAlarmSum"
                          :tableData="todayAlarmDetail"
                          @on-locate-alarm="mapLocate"></todayAlarm>
            </div>
          </div>
          </Col>
        </Row>
        <Row style="margin-top:15px;"
             gutter="20">
          <Col :span="12">
          <div class="xpanel">
            <div class="realTime-title">
              <div>火灾告警趋势</div>
            </div>
            <div>
              <smoothLine :LineDataSource="yearAlarmReasonSum"></smoothLine>
            </div>
          </div>
          </Col>
          <Col :span="12">
          <div class="xpanel">
            <div class="realTime-title">
              <div>隐患状态</div>
            </div>
            <div>
              <bar :LineDataSource="homeDeptHiddenAlarmSum"></bar>
            </div>
          </div>
          </Col>
        </Row>
        <audio id="audioPlay1"
               src="static/119.ogg"
               controls="controls"
               style="display:none;"></audio>
      </div>
    </div>
    <Spin size="large"
          fix
          v-if="spinShow"
          style="z-index:99999"></Spin>
  </div>
</template>

<script>
import { getRealSum } from '@/api/monitor'
import shopAlarm from './components/shopAlarm'
import todayAlarm from './components/todayAlarm'
import GDMap from './components/GDMap'
import smoothLine from './components/smoothLine'
import bar from './components/bar'
import config from '@/config'
const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev
    : config.baseUrl.pro
export default {
  components: {
    shopAlarm,
    todayAlarm,
    GDMap,
    smoothLine,
    bar
  },
  data() {
    return {
      chartHeight: 500,
      allPlaceAlarmSum: [],
      todayAlarmSum: { alarm_count: 0, shop_count: 0 },
      shopLatLngList: [],
      todayAlarmDetail: [],
      yearAlarmReasonSum: [],
      homeDeptHiddenAlarmSum: [],
      mysocket: null,
      spinShow: true
    }
  },
  created() {},
  mounted() {
    this.initData()
    this.chartHeight = window.innerHeight - 140
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下高度．
    const that = this
    window.addEventListener('resize', function() {
      that.chartHeight =
        window.innerHeight - 150 < 300 ? 300 : window.innerHeight - 140
    })
    this.socketConn()
  },
  methods: {
    async initData() {
      let res = await getRealSum({})
      if (res.code == 0) {
        this.spinShow = false
        console.log(res)
        this.allPlaceAlarmSum = res.data.allPlaceAlarmSum
        this.todayAlarmSum = res.data.todayAlarmSum
        //  this.shopLatLngList = res.data.shopLatLngList;
        this.todayAlarmDetail = res.data.todayAlarmDetail
        this.yearAlarmReasonSum = res.data.yearAlarmReasonSum
        this.homeDeptHiddenAlarmSum = res.data.homeDeptHiddenAlarmSum
      }
    },
    fullScreen() {
      window.open(window.location.origin + '/#/realTime')
    },
    mapLocate(latlng) {
      this.$refs.GdMap.mapSetZoomCenter(latlng.lng, latlng.lat)
      // let obj = {
      //   msgType: "alarm",
      //   streamId: "fireAlarm",
      //   lng: "113.540091",
      //   alarmTime: "2019-07-19T11:27:44",
      //   alarmData: "烟感传感器火警",
      //   shopName: "新大天然酒楼",
      //   rawData: "5A028292922ADB,20190719023032,100,-700,170,0,6AC0B65,28",
      //   addr: " 珠海市香洲区人民西路880号科利大厦二楼总经理办公室",
      //   deviceName: "电信NB-IoT烟感",
      //   lat: "22.380425"
      // };
      //  if (obj.msgType == "alarm" && obj.streamId == "fireAlarm") {
      //      this.initData();
      //     this.$Notice.warning({
      //       title: obj.alarmData,
      //       desc: "设备：" + obj.deviceName + ",地址：" + obj.addr,
      //       duration: 0
      //     });

      //     if (obj.msgType == "alarm" && obj.streamId == "fireAlarm") {
      //       let audioPlay = document.getElementById("audioPlay1");
      //       audioPlay.play();
      //       if (obj.lng && obj.lat) {
      //         this.$refs.GdMap.addAlarm(obj);
      //       }
      //     }

      //   }
    },
    socketConn() {
      let socketUrl = baseUrl.split('/')[2]
      let loginName = sessionStorage.getItem('loginName')
      //if (this.mysocket!=null&&this.mysocket.readyState === this.mysocket.OPEN) {
      //        return;
      //} 无效果，切换页面后无法保持连接
      this.mysocket = new WebSocket(
        `ws://${socketUrl}/smokev2/websocket/${loginName}`
      )
      //打开事件
      this.mysocket.onopen = () => {
        console.log('Socket 已打开')
      }
      //获得消息事件
      this.mysocket.onmessage = msg => {
        console.log(msg.data)
        var obj = JSON.parse(msg.data)
        console.log(obj.alarmData)
        if (obj.msgType == 'alarm' && obj.streamId == 'fireAlarm') {
          this.initData()
          this.$Notice.warning({
            title: obj.alarmData,
            desc: '设备：' + obj.deviceName + ',地址：' + obj.addr,
            duration: 0
          })

          if (obj.msgType == 'alarm' && obj.streamId == 'fireAlarm') {
            let audioPlay = document.getElementById('audioPlay1')
            audioPlay.play()
            if (obj.lng && obj.lat) {
              this.$refs.GdMap.addAlarm(obj)
            }
          }
        }
      }
      //关闭事件
      this.mysocket.onclose = () => {
        console.log('Socket已关闭')
      }
      //发生了错误事件
      this.mysocket.onerror = () => {
        console.log('Socket发生了错误')
      }
      this.$router.afterEach(() => {
        this.mysocket.close()
      })
    }
  }
}
</script>
